<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户注册</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <link rel="stylesheet" href="../css/style.css">
</head>
<body>
<div id="app" class="registration-container">
    <h2>用户注册</h2>
    <form @submit.prevent="registerUser" class="registration-form">
        <div class="form-group">
            <label for="username">用户名:</label>
            <input type="text" id="username" v-model="formData.username" required>
        </div>

        <div class="form-group">
            <label for="email">邮箱:</label>
            <input type="email" id="email" v-model="formData.email" required>
        </div>

        <div class="form-group">
            <label for="phone">手机号:</label>
            <input type="tel" id="phone" v-model="formData.phone" required>
        </div>

        <div class="form-group">
            <label for="password">密码:</label>
            <input type="password" id="password" v-model="formData.password" required>
        </div>

        <div class="form-group">
            <label for="confirmPassword">确认密码:</label>
            <input type="password" id="confirmPassword" v-model="formData.confirmPassword" required>
        </div>

        <button type="submit" :disabled="!isFormValid">注册</button>

        <p v-if="errorMessage" class="error-message">{{ errorMessage }}</p>
        <p v-if="successMessage" class="success-message">{{ successMessage }}</p>
    </form>
</div>

<script src="../js/register.js"></script>
</body>
</html>